<script setup lang="ts">
defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 5
  },
  total: {
    type: Number,
    default: 0
  },
  pageSizes: {
    type: Array<number>,
    default: () => [2, 3, 5, 10]
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  }
})
type Emit = {
  (e: 'update:currentPage', currentPage: number): void
  (e: 'update:pageSize', pageSize: number): void
}
const emits = defineEmits<Emit>()

/**
 * page-size 每页显示条目个数改变时触发
 * @param pageSize {Number} 每页显示条目个数
 */
const sizeChange = (pageSize: number) => {
  // 当更改每页显示条目个数时  重置当前页为 1
  emits('update:currentPage', 1)
  emits('update:pageSize', pageSize)
}

/**
 * current-page 当前页数改变时触发
 * @param currentPage {Number} 当前页数
 */
const currentChange = (currentPage: number) => {
  emits('update:currentPage', currentPage)
}
</script>

<template>
  <!-- 这里使用了一个 v-bind="$attrs" 这样的一个属性，它可以把外面 props 直接传递到 el-pagination 组件中 也可以删除 -->
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    :layout="layout"
    :page-sizes="pageSizes"
    v-bind="$attrs"
    @size-change="sizeChange"
    @current-change="currentChange"
  />
</template>
